<template>
  <page-card title="消息列表">
    <a-row class="1"
           style="height:730px;">
      <a-col :span="5"
             style="border-right:1px solid #efecec;padding:24px 0 0 24px;height:100%;overflow-y:auto;margin-top: 1px;">
        <div class="source-panel-total left-message-list-title"
             @click="queryMessagelist()">
          <span>全部消息</span>
          <a-badge :count="num"
                   :offset=[2,0]
                   :overflow-count="99">
          </a-badge>
        </div>
        <div class="source-panel-total left-message-list-title">
          <div id="components-badge-demo-title"
               @click="handleTzClick">
            <span>通知公告</span>
            <a-badge :count="tznum"
                     :offset=[2,0]
                     :overflow-count="99">
            </a-badge>
          </div>
        </div>
        <div class="source-panel-classify">
          <a-collapse default-active-key="1"
                      accordion
                      :bordered="false"
                      @change="collapseChange">
            <a-collapse-panel v-for="(items,index) in AppList"
                              :key="index"
                              :forceRender="true"
                              :disabled="!items.list.length>0"
                              :show-arrow="items.list.length>0">
              <div slot="header"
                   v-if="items.list.length>0"
                   class="left-message-list-title">
                {{ items.appClassificationName }}
                <a-badge :count="items.msgCount"
                         :offset=[-2,-5]
                         :overflow-count="99">
                </a-badge>
              </div>
              <div slot="header"
                   v-if="items.list.length<1"
                   class="left-message-list-title"
                   style="margin-left:28px;color:#3D3D3E;cursor: pointer;">
                {{ items.appClassificationName }}
                <a-badge :count="items.msgCount"
                         :offset=[-2,-5]
                         :overflow-count="99">
                </a-badge>
              </div>

              <a-menu mode="inline">
                <a-menu-item :key="appIndex"
                             v-for="(item,appIndex) in items.list"
                             @click="queryAppMessagelist(item.id)">
                  <template>
                    <div class="left-message-list-title">
                      <div class="msg-img">
                        <img v-if="item.logo && item.logo.indexOf('/')>-1"
                             :src="storage.baseURL+item.logo" />
                        <div v-if="item.logo && item.logo.indexOf('/')==-1"
                             :style="'background:'+item.logoColor"
                             class="icon-box">
                          <span :class="item.logo"
                                style="color:#fff"
                                class="iconfont" />
                        </div>
                        <img v-if="!item.logo"
                             :src="defaultImg">
                      </div>
                      <span class="text-box"> {{ item.name }}</span>
                      <a-badge :count="item.appNum"
                               :dot="true"
                               :overflow-count="99">
                      </a-badge>
                    </div>
                  </template>
                </a-menu-item>
              </a-menu>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-col>
      <a-col :span="19"
             style="margin-left: -1px;padding:0 24px">
        <a-row class="message-list">
          <a-col :span="9">
            <a-button type="primary"
                      @click="editReadStatus">全部已读</a-button>
          </a-col>
          <a-col :span="10"></a-col>
          <a-col :span="5">
            <a-input-search v-model="sourceTitle"
                            placeholder="输入消息内容关键字"
                            allow-clear
                            @search="searchMessage" />
          </a-col>
        </a-row>
        <a-table :columns="columns"
                 :data-source="dataSource"
                 :rowClassName="rowClassName"
                 :rowKey="(record, index) => index"
                 :pagination="false"
                 class="msg-table">

          <template slot="createTime"
                    slot-scope="createTime">
            {{ createTime | filterTime(createTime) }}
          </template>
          <template slot="tags"
                    slot-scope="text, tags">
            <a @click="openDetail(tags)">详情</a>
          </template>
        </a-table>
        <a-pagination :total="totalCount"
                      :pageSize="pageSize"
                      :current="current"
                      show-size-changer
                      @showSizeChange="onShowSizeChange"
                      @change="onChange"
                      :show-total="totalCount => '共 '+totalCount+' 条数据'"
                      class="msg-pagination" />
      </a-col>
    </a-row>
  </page-card>
</template>

<script>
import {
  getMessagePage,
  editReadStatus,
  editReadStatusOne,
  getAppMsgCount
} from '../../api/message/MessageCenter'
import { storage } from '@zh/common-utils/http'
import storageToken from '@zh/common-utils/utils/storage'
import defaultImg from '../../assets/app-default.png'
import moment from 'moment'

export default {
  name: 'MessageCenter',
  data () {
    return {
      aapId: '',
      defaultImg: defaultImg,
      storage: storage,
      sourceTitle: '',
      text: '',
      num: '',
      tznum: '',
      AppList: [],
      dataSource: [],
      columns: [],
      current: 1,
      pageSize: 10,
      totalCount: 0,
      currPage: 1,
      messageType: ''
    }
  },
  methods: {
    // 左边应用列表点击切换
    handleTzClick () {
      this.messageType = '1'
      let params = {
        currPage: 1,
        current: 1,
        pageSize: 10,
        category: '1',
        messageType: this.messageType
      }
      this.queryMessageInsidePage(params)
    },
    // 全部消息查询
    queryMessagelist () {
      let me = this
      me.aapId = ''
      me.sourceTitle = ''
      me.messageType = ''
      let params = {
        currPage: 1,
        current: 1,
        pageSize: 10,
        category: '1'
      }
      me.queryMessageInsidePage(params)
    },
    // 应用消息查询
    queryAppMessagelist (val) {
      let me = this
      me.aapId = val
      me.sourceTitle = ''
      me.messageType = ''
      let params = {
        currPage: 1,
        current: 1,
        pageSize: 10,
        category: '1',
        sourceAppId: val
      }
      me.queryMessageInsidePage(params)
    },
    searchMessage () {
      let me = this
      let params = {
        currPage: 1,
        current: 1,
        pageSize: 10,
        category: '1'
      }
      if (me.messageType) {
        params.messageType = me.messageType
      }
      if (me.sourceTitle) {
        params.keyword = me.sourceTitle
      }
      if (me.aapId) {
        params.sourceAppId = me.aapId
      }
      me.queryMessageInsidePage(params)
    },
    queryMessageInsidePage (val) {
      let me = this
      me.columns = [
        {
          title: '消息内容',
          dataIndex: 'title',
          width: 500,
          ellipsis: true, // 可以让单元格内容根据宽度自动省略
          // align: 'center',
          customRender: (value, row, index) => {
            // 本列的值,所有行数据包括本列,第几列。表体的数据列样式
            const obj = {
              children: value,
              attrs: {}
            }
            obj.attrs.align = 'left' // 控制表体内容居右
            obj.attrs.style = row.readStatus == '1' ? 'color:#D3D3D3' : ''
            return obj
          },
          scopedSlots: { customRender: 'title' }
        },
        {
          title: '通知时间',
          dataIndex: 'createTime',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '操作',
          dataIndex: 'tags',
          key: 'tags',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'tags' }
        }
      ]
      getMessagePage(val).then((res) => {
        me.dataSource = res.list
        me.current = res.currPage
        me.pageSize = res.pageSize
        me.totalCount = res.totalCount
        me.totalPage = res.totalPage
      })
    },
    onShowSizeChange (current, pageSize) {
      let me = this
      let params = {
        currPage: current,
        pageSize: pageSize,
        category: '1'
      }
      if (me.sourceTitle) {
        params.keyword = me.sourceTitle
      }
      if (me.aapId) {
        params.sourceAppId = me.aapId
      }
      if (me.messageType) {
        params.messageType = me.messageType
      }
      me.queryMessageInsidePage(params)
    },
    onChange (pageNumber) {
      let me = this
      let params = {
        currPage: pageNumber,
        category: '1'
      }
      if (me.sourceTitle) {
        params.keyword = me.sourceTitle
      }
      if (me.aapId) {
        params.sourceAppId = me.aapId
      }
      if (me.messageType) {
        params.messageType = me.messageType
      }
      me.queryMessageInsidePage(params)
    },
    rowClassName (record, index) {
      return record.readStatus == '1' ? 'row-color' : ''
    },
    editReadStatus () {
      let me = this
      editReadStatus().then((res) => {
        me.getUserAppList()
        me.queryMessagelist()
      })
    },
    openDetail (item) {
      let me = this
      me.getUserAppList()
      item.category = item.messageType == '3' ? '2' : '1'
      if (item.readStatus == '2') {
        editReadStatusOne(item.insideMsgId).then((res) => {
          me.queryMessagelist()
        })
        this.handleTzClick()
      }
      let msgJson = JSON.parse(item.msg)
      let target = msgJson.action_card.single_pc_url
      const token = storageToken.getToken()?.value || ''
      if (item.category == '1') {
        this.$router.push(target)
      } else {
        if (!item.ssoLoginUrl) {
          let text = this.$router.resolve({
            path: target
          })
          text.href = text.href + '&back=message-center'
          // 打开一个新的页面
          window.open(text.href, '_blank')
          return
        }
        window.open(
          `${item.ssoLoginUrl}?targetUrl=${encodeURIComponent(
            target
          )}&token=${token}`
        )
      }
      // if (item.category == '1') {
      //   this.$router.push(target)
      // } else {
      //   window.open(
      //     `${item.ssoLoginUrl}?targetUrl=${encodeURIComponent(target)}&token=${
      //       storageToken.getToken().value
      //     }`
      //   )
      // }
    },
    collapseChange (key) { },
    getUserAppList () {
      getAppMsgCount().then((res) => {
        this.num = res.totalNum
        this.tzNum = res.tzNum
        this.AppList = res.appClassList
      })
    }
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  filters: {
    filterTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    }
  },
  created () {
    // 消息查询
    this.queryMessagelist()
    // 消息分类
    this.getUserAppList()
  }
}
</script>
<style lang="less" scoped>
.msg-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
.left-message-list-title {
  > * {
    vertical-align: middle;
  }
  .text-box {
    display: inline-block;
    max-width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  > .ant-badge {
    margin-top: 0px;
    margin-left: 0px;
  }
}

.msg-pagination {
  text-align: right;
}

.source-panel {
  padding: 0;
  margin: 0;
  outline: none;
  border-right: 1px solid #efecec;
}

.source-panel-total {
  position: relative;
  padding: 12px 16px;
  padding-left: 40px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 22px;
  font-size: var(--font-size-16);
  cursor: pointer;
  border-bottom: 0px solid #efecec;
  background: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.source-panel-total:hover {
  background: #f0f2f5;
}
.ant-menu-item:hover {
  background: #f0f2f5;
}

.source-panel-classify {
  padding: 0;
  margin: 0;
  outline: none;
}

.ant-collapse {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  background: #fff;
  border: 0px solid #d9d9d9 !important;
  border-bottom: 0;
  border-radius: 4px;
}

.ant-collapse-borderless {
  // background-color: #fafafa;
  background-color: #fff;
  border: 0;
}

:deep(.ant-collapse-content) {
  border-top: 0px solid #d9d9d9 !important;
}

:deep(.ant-collapse-content) > .ant-collapse-content-box {
  padding: 0px !important;
}
/deep/.ant-collapse-content-box {
  border: none !important;
}
:deep(.ant-collapse) > .ant-collapse-item {
  border-bottom: 0px solid #d9d9d9 !important;
}

:deep(.row-color) {
  color: #dfd9df !important;
}

:deep(.ant-card-body) {
  padding: 2px 24px 24px 24px !important;
}
/deep/.ant-card-body {
  padding: 0px !important;
}
:deep(.ant-menu-inline) {
  border-right: 0px solid #e8e8e8 !important;
  margin-left: 25px;
}

.message-list {
  padding-top: 22px;
}
.head-example {
  line-height: 22px;
  display: inline-block;
}
#components-badge-demo-title {
  height: 22px;
}
.msg-img {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 10px;
  .icon-box {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    vertical-align: super;
    .iconfont {
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  img {
    width: 32px;
    height: 32px;
    vertical-align: top;
  }
}

.ant-collapse-borderless > .ant-collapse-item {
  border-bottom: 0px solid #d9d9d9;
}

.ant-collapse > .ant-collapse-item {
  border-bottom: 0px solid #d9d9d9;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: 0px solid #e8e8e8;
}
</style>